<template>
  <div class="card">
    <!-- up图片 -->
    <div
      class="image"
      @click="
        $router.push({
          name: 'Personal',
          query: { hostMid: props.cards.desc.user_profile.info.uid },
        })
      "
    >
      <img class="img" :src="props.cards.desc.user_profile.info.face" />
    </div>
    <!-- 主要内容 -->
    <div class="mainContent">
      <div
        class="userName"
        @click="
          $router.push({
            name: 'Personal',
            query: { hostMid: props.cards.desc.user_profile.info.uid },
          })
        "
      >
        {{ props.cards.desc.user_profile.info.uname }}
      </div>
      <div class="time">
        {{ moment(props.cards.card.pubdate * 1000).format('YYYY-MM-DD hh:mm:ss') }}
      </div>
      <div class="cardContent">
        <div class="postContent">
          <div class="originalCardContent">
            <div class="description">
              <!-- 主要文本内容  -->
              <div class="content">
                <!-- <div class="ellipsis">
                  经典美剧【老友记全十季高清视频】，非常非常珍贵的资料，<br />
                  仅限今天免费领取，明天这时候删除~<br />
                  <br />
                  <br />
                  2.领取方式：在【图2】的后台，回复【老友记】，即可免费领取。
                  <br />
                  "..."
                </div>
                <div class="hidden contentFull">
                  经典美剧【老友记全十季高清视频】，非常非常珍贵的资料，<br />
                  仅限今天免费领取，明天这时候删除~<br />
                  <br />
                  <br />
                  2.领取方式：在【图2】的后台，回复【老友记】，即可免费领取。
                  <br />
                  4.并恳请大家【留言告知】，整理资源不易，跪求不要白嫖！
                  <br />
                  白嫖真的很让人心寒，跪求大家了 ~
                </div> -->
                {{ props.cards.card.dynamic }}
              </div>
              <!-- <div class="btns">
                <div class="expandBtn">收起/展开</div>
              </div> -->
            </div>
            <div
              class="videoBox"
              @click="routerToVideo(props.cards.card.aid, props.cards.desc.bvid)"
            >
              <img :src="props.cards.card.pic" />
              <div class="mask">
                <div class="dt">{{ moment(props.cards.card.duration * 1000).format('mm:ss') }}</div>
              </div>
              <div class="video-info">
                <div class="video-title">
                  {{ props.cards.card.title }}
                </div>
                <div class="video-desc">
                  {{ props.cards.card.desc }}
                </div>
                <div class="video-count">
                  <div>
                    <span class="iconfont icon-shipin"></span>
                    <span class="num">{{ localNum(props.cards.card.stat.view, 1) || 0 }}</span>
                  </div>
                  <div>
                    <span class="iconfont icon-danmushu"></span>
                    <span class="num">{{ localNum(props.cards.card.stat.danmaku, 1) || 0 }}</span>
                  </div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部三个按钮 -->
      <div class="buttonBar">
        <div class="singleBtn">
          <span class="textBar">
            <i class="iconfont icon-31zhuanfa">&nbsp;&nbsp;转发</i>
          </span>
        </div>
        <div class="singleBtn">
          <i class="iconfont icon-pinglun">
            &nbsp;&nbsp;{{ localNum(props.cards.card.stat.reply, 1) || 0 }}
          </i>
        </div>
        <div class="singleBtn">
          <i class="iconfont icon-dianzan">
            &nbsp;&nbsp;{{ localNum(props.cards.card.stat.like, 1) || 0 }}
          </i>
        </div>
      </div>
    </div>
    <!-- 右侧按钮 -->
    <div class="buttonArea">
      <div class="iconfont icon-diandiandianshu"></div>
    </div>
    <!-- 点击右侧按钮后,出现子按钮 -->
    <div class="morePanel">
      <p class="childBtn">取消关注</p>
      <p class="childBtn">举报</p>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import type { DynamicCardsModel } from '@/api/trends'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    name: 'Card',
  })
</script>

<script lang="ts" setup>
  // import { ElButton } from 'element-plus'
  import moment from 'moment'
  import { localNum } from '@/utils/lib'
  const props = defineProps<{ cards: DynamicCardsModel }>()

  const router = useRouter()
  const routerToVideo = (aid: number, bvid: string) => {
    router.push({ name: 'Video', query: { aid, bvid } })
  }
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2977499_2e2oy379s0t.css');
</style>

<style lang="less" scoped>
  .card {
    margin-bottom: 8px;
    background-color: #fff;
    position: relative;
    top: 0;
    border-radius: 4px;
    min-width: 632px;
    color: #222;
    font-size: 14px;
    .image {
      position: absolute;
      width: 48px;
      height: 48px;
      top: 24px;
      left: 24px;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .mainContent {
      width: 534px;
      padding-top: 27px;
      padding-bottom: 0px;
      margin-left: 88px;
      // background-color: brown;
      .userName {
        font-size: 16px;
        color: rgb(251, 114, 153);
        cursor: pointer;
      }
      .time {
        color: #99a2aa;
        font-size: 12px;
        cursor: pointer;
        margin-top: 5px;
        &:hover {
          color: rgb(251, 114, 153);
        }
      }
      .cardContent {
        margin-top: 10px;
        box-sizing: border-box;
        padding-right: 0;
        .postContent {
          .originalCardContent {
            padding-right: 30px;

            .description {
              max-width: 100%;
              display: inline-block;
              margin-bottom: 10px;
              font-size: 14px;
              line-height: 22px;
              word-wrap: break-word;
              letter-spacing: 0.5px;
              // 主要内容
              .content {
                // padding-right: 10px;
                // .ellipsis {
                //   // overflow: hidden;
                //   text-overflow: ellipsis;
                //   word-break: break-word;
                //   word-wrap: break-word;
                // }
                .contentFull {
                  //全部内容是否需要隐藏
                  // display: none;
                  // height: 0;
                  width: 100%;
                  word-break: break-word;
                  word-wrap: break-word;
                }
              }
              //展开和收起
              .btns {
                .expandBtn {
                  display: inline-block;
                  color: #178bcf;
                  cursor: pointer;
                  line-height: 22px;
                }
              }
            }
            //图片框
            // .imgsbox {
            // }
          }
        }
      }
      // 底部三个按钮
      .buttonBar {
        width: 100%;
        color: #99a2aa;
        .singleBtn {
          display: inline-block;
          line-height: 48px;
          width: 92px;
          cursor: pointer;
          &:hover {
            color: #00a1d6;
          }
          .iconfont {
            font-size: 12px;
          }
        }
      }
    }
    // 右侧按钮
    .buttonArea {
      position: absolute;
      top: 28px;
      right: 16px;
      user-select: none;
      cursor: pointer;
      .icon-diandiandianshu {
        font-size: 30px;
        color: #ccd0d7;
        &:hover {
          color: #00a1d6;
        }
      }
    }
    // 右侧子按钮
    .morePanel {
      //动态显示隐藏
      display: none;
      position: absolute;
      width: 94px;
      text-align: center;
      top: 63px;
      right: 5px;
      background-color: #fff;
      border: 1px solid #e5e9ef;
      border-radius: 8px;
      z-index: 10;
      box-shadow: 0 11px 12px 0 rgb(106 115 133 / 12%);
      .childBtn {
        cursor: pointer;
        &:first-child {
          padding-top: 18px;
          padding-bottom: 4px;
        }
        &:last-child {
          padding-bottom: 18px;
          padding-top: 4px;
        }
      }
    }
  }

  .videoBox {
    position: relative;
    display: flex;
    // justify-content: space-between;
    width: 100%;
    height: 130px;
    border: 1px solid #e5e9ef;
    cursor: pointer;

    &:hover {
      .mask {
        background-color: #00000033;
        .dt {
          opacity: 1;
        }
      }
      .video-title {
        color: #16a9da;
      }
    }
    img {
      width: 208px;
      height: 130px;
    }

    .mask {
      position: absolute;
      flex-shrink: 0;
      width: 208px;
      height: 130px;
      background-color: transparent;
      transition: background-color 300ms;
    }

    .dt {
      position: absolute;
      left: 6px;
      bottom: 4px;
      color: #fff;
      font-size: 12px;
      opacity: 0;
      transition: opacity 300ms;
    }
    .video-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      .video-title {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 38px;
        transition: color 300ms;
      }

      .video-desc {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 36px;
        color: #999;
        font-size: 12px;
      }

      .video-count {
        display: flex;
        align-items: center;
        font-size: 12px;
        div {
          display: flex;
          align-items: center;
          color: #999;
          margin-right: 10px;
          .iconfont {
            margin-right: 3px;

            &.icon-danmushu {
              transform: scale(0.95);
            }
          }
        }
      }
    }
  }
</style>
